/*
 * @Autor: dc
 * @Date: 2022-03-31 16:37:26
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-10-18 16:01:25
 * @Description: 太阳
 */
import React, { Component } from 'react';
import store from '../../../../redux/store'
import $ from 'jquery'
import './index.scss'

import { Toast } from 'antd-mobile'
import {  actionBarConfig } from '../../../../redux/action/tree'


class index extends Component {
    // 收太阳
    sunlightFun = () => {
        console.log('收太阳')
        const {treeAnimation,addEnergy} = this.props
        const { operationArr } = store.getState()
        const { prepare,cooling } = operationArr.find(item => item.name === '阳光')
        if (prepare > 0) {
            Toast.show({
                content: '请耐心等待, 阳光充能中',
                maskClickable: false,
            })
            return;
        }
        $('.sunlight').eq(0).animate({
            "left": "45%",
            "top": '0px',
            "opacity": '0',
            'animation': 'none',
        }, 1500, function () {
            $(this).css({
                'top': '-1rem',
                'left': '45%',
                'opacity': 1,
            })
            store.dispatch(actionBarConfig({
                name: '阳光',
                prepare: cooling,
            }, 1000))
            treeAnimation();
            addEnergy();
        })
    }
    

    render() {
        const { operationArr } = store.getState()
        const { prepare } = operationArr.find(item => item.name === '阳光')
        return (
            <div className="sunlight">
                <i className='sunlight_icon flex_center'>
                    <img onClick={this.sunlightFun} src={require('../../../../assets/operation/sunlight.png')}
                        alt="" />
                    {prepare > 0 ? <span className='sunshine_time'>{prepare}</span> : ''}
                </i>
            </div>
        );
    }
}

export default index;